<template>
	<div class="city-list">
		<!-- 定位城市 -->
		<div class="position-city common">
			<p>定位/附近城市</p>
			<ul>
				<li>{{show}}</li>
			</ul>
		</div>
		<!-- 热门城市 -->
		<div class="hot-cites common">
			<p>热门城市</p>
			<ul>
				<li v-for="item in hotCList" :key="item.code" @click="toHome(item.name)" :class="{'default':show==item.code}">{{item.name}}</li>
			</ul>
		</div>
		<!-- 字母 -->
		<div class="all-city common">
			<article v-for="(item , index) in cityList" :key="index">
				<h3>字母{{item.initial}}开头的城市</h3>
				<ul>
					<li v-for="key in item.list" :key="key.code" @click="toHome(key.name)" :class="{'default':show==key.name}">{{key.name}}</li>
				</ul>
			</article>
		</div>
	</div>
</template>

<script>
import {mapMutations , mapState} from 'vuex';
export default{
	name:'CityList',
	data(){
		return{
			hotCList : [],
			cityList : [],
			show : localStorage.city,
		}
	},
	mounted(){
		if(localStorage.city){
			this.show = localStorage.city;
		}
	},
	methods:{
		toHome( cname ){
			// 当点击某个城市时，获取传递过来的城市名称
			//this.show = this.cityName;
			// 调用并传参被选中的城市名进行传递
			this.changeCity(cname);
			// 返回首页
			this.$router.push('/');
		},
		// 激活mutations的方法
		...mapMutations(['changeCity'])
	},
	// 组件创建之后
	created(){
		let that = this;
		//get发起请求，/api/city.json
		this.axios.get('/api/city.json').then( (res)=>{
			// 判断请求是否成功
			if(res.status === 200){
				// 数据的分配
				let data = res.data.data;
				that.hotCList = data.hotCities;
				that.cityList = data.city
				
				console.log(that.cityList);
			}
		}).catch( (error)=>{
			console.log(error)
		})
	}
}
</script>

<style scoped>
.city-list .common ul .default{
	background-color: #FED101;
	color: white;
}
	
.city-list{
	padding-top: 0.2rem;
}
/* 公共样式 */
.city-list .common{
	padding: 0.2rem 0.25rem;
	color: #999;
}
.city-list .common p{
	font-size: 0.35rem;
	line-height: 0.4rem;
}
.city-list .common ul{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
.city-list .common ul li{
	width: 14%;
	background-color: #e6e6e6;
	height: 0.82rem;
	line-height: 0.82rem;
	border-radius: 0.3rem;
	margin: 0.2rem 0.08rem;
	text-align: center;
	font-size: 0.3rem;
}
.all-city article{
	padding-top: 0.2rem;
}
.all-city article h3{
	line-height: 0.8rem;
	font-size: 0.35rem;
	border-top: 0.2rem solid gray;
}
</style>
